<template>
    <div class="wisdom-main">
        <div class="container">
            <div class="info" :class="{'active':showInfo}">
                <div style="text-align:center;position: relative;padding:5px">
                    <h4>{{getTitle(detailInfo.type)}}</h4>
                    <i class="el-icon-close" style="position: absolute;right: 0;top: 0;cursor: pointer;" @click="showInfo=false"></i>
                </div>
                <div style="display: flex; align-items: center;">
                    <div>
                        <i class="iconfont icon-dianbiao" style="font-size:50px;color: #409eff;padding:20px" v-show="detailInfo.type==1"></i>
                        <i class="iconfont icon-ziyuan86" style="font-size:50px;color: #409eff;padding:20px" v-show="detailInfo.type==0"></i>
                        <i class="iconfont icon-shexiangtou" style="font-size:50px;color: #409eff;padding:20px" v-show="detailInfo.type==2"></i>
                    </div>
                    <!--rfid报警-->
                    <div v-show="detailInfo.type==0">
                        <div>所在小区：{{detailInfo.orgName}}</div>
                        <div>电动车名称：{{detailInfo.carName}}</div>
                        <div>车主名称：{{detailInfo.ownerName}}</div>
                        <div>设备位置：{{detailInfo.rfidEquipmentName}}</div>
                        <div>预警时间：{{_formatTime(detailInfo.createTime)}}</div>
                        <div>设备标签：{{detailInfo.rfidCardNo}}</div>
                    </div>
                     <!--rfid报警-->
                    <div v-show="detailInfo.type==1">
                        <div>所在小区：{{detailInfo.orgName}}</div>
                        <div>设备名称：{{detailInfo.equipmentName}}</div>
                        <div>设备位置：{{detailInfo.address}}</div>
                        <div>预警时间：{{_formatTime(detailInfo.createTime)}}</div>
                    </div>
                    <!--摄像头报警-->
                    <div v-show="detailInfo.type==2">
                        <div>所在小区：{{detailInfo.orgName}}</div>
                        <div>设备名称：{{detailInfo.equipmentName}}</div>
                        <div>设备位置：{{detailInfo.address}}</div>
                        <div>预警类型：{{formatAlarmType(detailInfo.alarmName)}}</div>
                        <div>预警时间：{{_formatTime(detailInfo.alarmTime)}}</div>
                        <div>
                            查看抓图:
                            <el-button type="text" @click="imgDialogVisible = true" style="padding:0">查看抓图</el-button>
                        </div>
                        <div>
                            视频回放:
                            <el-button type="text" @click="doVideo" style="padding:0">查看视频</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="title">
                    <h4>
                        <i class="el-icon-position" style="margin-right:5px"></i>预警地图
                    </h4>
                </div>
                <ali-map ref="ali-map" @complete="getAlarmRecords(true)"></ali-map>

                <div class="right">
                    <div class="right-card">
                        <equipment-type @select="equipmentChange" style="width:100%" default-value></equipment-type>
                        <el-scrollbar wrap-class="alarm-wrap-class" ref="scollRef" style="padding-bottom:20px">
                            <div v-for="(item,index) in alarmRecords" :key="index" class="alarm" @click="showDetailInfo(item)">
                                <ul class="user-info">
                                    <li>小区:{{item.orgName}}</li>
                                    <li v-show="item.type ==0">车主名:{{item.ownerName}}</li>
                                    <li v-show="item.type !==0">设备名:{{item.equipmentName}}</li>
                                    <li>预警时间:{{_formatTime(item.createTime)}}</li>
                                </ul>

                                <i class="iconfont icon-dianbiao" :class="item.isDeal=='Y'?'normal-icon':'deal-icon'" v-show="item.type==1"></i>
                                <i class="iconfont icon-alarm" :class="item.isDeal=='Y'?'normal-icon':'deal-icon'" v-show="item.type==0"></i>
                                <i class="iconfont icon-shexiangtou" :class="item.isDeal=='Y'?'normal-icon':'deal-icon'" v-show="item.type==2"></i>
                                <div style="display: flex;justify-content: space-between;padding-bottom:10px">
                                    <el-button type="text" @click.stop="doPositioning(item)">定位</el-button>
                                    <el-button type="text" @click.stop="doDeal(item)" v-if="item.isDeal !== 'Y'">接警</el-button>
                                    <el-link type="primary" disabled v-else>已接警</el-link>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
                <div class="butns">
                    <div style="color:#409eff;width:45px;padding:5px">设备分布</div>
                    <div v-for="(item,index) in dictTypes" :key="index" class="card" :class="{'active':activeIndex == index}" @click="doQuery(item,index)">
                        <i :class="item.icon" style="font-size:20px"></i>
                        <div style="font-size:12px">{{item.label}}</div>
                    </div>
                </div>
                <div class="statistics">
                    <div class="item">
                        <i class="iconfont icon-building" style="font-size:40px;color:#67C23A;margin-right:5px"></i>
                        <div>
                            <span style="color:#fff;font-size:16px">{{totalObj.orgTotal}}</span>
                            <div style="font-size:12px">小区总数</div>
                        </div>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-lianhe5" style="font-size:40px;color:#E6A23C;margin-right:5px"></i>
                        <div>
                            <span style="color:#fff;font-size:16px">{{totalObj.cameraTotal+totalObj.rfidTotal+totalObj.electricTotal}}</span>
                            <div style="font-size:12px">设备总数</div>
                        </div>
                    </div>

                    <div class="item">
                        <i class="iconfont icon-anquanjingbao" style="font-size:40px;color:red;margin-right:5px"></i>
                        <div>
                            <span style="color:#fff;font-size:16px">{{totalObj.alarmTotal}}</span>
                            <div style="font-size:12px">累计报警</div>
                        </div>
                    </div>
                </div>
                <!-- <div class="three" @click="changeMapModel">
                    <div style="font-size:12px">3D</div>
                </div> -->
            </div>
        </div>
        <el-dialog :title="videoTitle" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <video style="width:100%;max-height:550px"  controls="" autoplay="" name="media">
                <source :src="videoSrc" type="video/mp4">
            </video>
        </el-dialog>

        <el-dialog :visible.sync="imgDialogVisible" width="70%" :before-close="handleClose2" style="text-align:center">
            <div v-if="!detailInfo.cameraCaptureUrl" style="min-height:400px;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                <div>暂无图像</div>
                <i class="el-icon-picture-outline" style="font-size:30px"></i>
            </div>
            <img v-else :src="_buillStaticPath(detailInfo.cameraCaptureUrl)" alt style="max-height:550px;width: 100%;" />
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import AliMap from './aliMap.vue'
import * as API from '@/api/business/rfid-record'
import * as CAM_API from '@/api/business/camera-equipment'
import * as RFID_API from '@/api/business/rfid-equipment'
import * as ALARM_API from '@/api/business/alarm-equipment'
import * as DICT_API from '@/api/admin/dict'
import * as TOTAL_API from '@/api/business/report'
// import * as DAHUA_API from '@/api/business/dahua'

export default {
    name: 'wel',
    components: { AliMap },
    data() {
        return {
            dialogVisible: false,
            imgDialogVisible: false,
            isFullScreen: true,
            videoSrc: '',
            videoTitle: '',
            isWarning: true,
            alarmRecords: [],
            lngLats: [],
            dictTypes: [],
            showInfo: false,
            detailInfo: {},
            activeIndex: -1,
            current: 1,
            total: 0,
            isLoadData: false,
            hasNext: true,
            type: -1,
            totalObj: {
                orgTotal: 0,
                alarmTotal: 0,
                rfidTotal: 0,
                electricTotal: 0,
                ownerTotal: 0,
                cameraTotal: 0,
                carTotal: 0
            }
        }
    },
    computed: {
        ...mapGetters(['website']),
        ...mapState({
            showLock: state => state.common.showLock,
            showFullScren: state => state.common.showFullScren,
            showCollapse: state => state.common.showCollapse,
            showMenu: state => state.common.showMenu
        }),
        ...mapGetters(['userInfo', 'tagWel', 'tagList', 'isCollapse', 'tag', 'globalOrg', 'cameraAlarmType'])
    },
    watch: {
        globalOrg(val) {
            console.log('全局orgid切换')
            this.current = 1
            this.hasNext = true
            this.alarmRecords = []
            this.getAlarmRecords(true)
        }
    },

    mounted() {
        this.$root.Bus.$on('global-alarm-event', (longitude, latitude) => {
            this.getAlarmRecords(true)
        })
        console.log('首页初始化')

        DICT_API.getItemByDictId(3).then(res => {
            if (res.data.code === 0) {
                res.data.data.forEach(item => {
                    if (item.value == 0) {
                        item.icon = 'iconfont icon-ziyuan86'
                    } else if (item.value == 1) {
                        item.icon = 'iconfont icon-dianbiao'
                    } else {
                        item.icon = 'iconfont icon-shexiangtou'
                    }
                })
                this.dictTypes = res.data.data
            }
        })
        this.queryTotal()
        this.listenScroll()
    },
    beforeDestroy() {
        console.log('首页销毁')
        this.$root.Bus.$off('global-alarm-event')
    },

    methods: {
        changeMapModel(){
            this.$refs['ali-map'].changeMapModel()
        },
        // getVideoStream(source) {
        //     if (Hls.isSupported()) {
        //         this.hls = new Hls()
        //         this.hls.loadSource(source)
        //         this.hls.attachMedia(this.$refs.video)
        //         this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        //             console.log('加载成功')
        //             this.$refs.video.play()
        //         })
        //         this.hls.on(Hls.Events.ERROR, (event, data) => {
        //             // console.log(event, data);
        //             // 监听出错事件
        //             console.log('加载失败')
        //         })
        //     }
        // },
        getVideoTitle() {
            return '视频地址:' + this.detailInfo.cameraHlsUrl || ''
        },
        handleClose() {
            this.dialogVisible = false
        },
        handleClose2() {
            this.imgDialogVisible = false
        },
        //视频播放
        doVideo() {
            // this.dialogVisible = true
            console.log(this.detailInfo)
            if (this.detailInfo.cameraHlsUrl && !!this.detailInfo.cameraHlsUrl) {
                this.videoSrc = this._buillStaticPath(this.detailInfo.cameraHlsUrl)
            }
            this.dialogVisible = true
            //根据预警数据入库时间去寻找对应的转码视频
            // API.video({ time: moment(this.detailInfo.alarmTime).format('YYYY-MM-DD HH:mm:ss'), deviceId: this.detailInfo.deviceId }).then(res => {
            //     if (res.data.code === 0 && res.data.data.length > 0) {
            //         this.videoTitle = res.data.data[0]
            //         this.videoSrc = this._buillStaticPath(res.data.data[0])
            //         this.dialogVisible = true
            //     } else {
            //         this.videoSrc = ''
            //         this.$message.warning('暂无视频')
            //     }
            // })

            // CAM_API.get(this.detailInfo.cameraEquipmentId).then(res => {
            //     if (res.data.code === 0) {
            //         let {deviceId} = res.data.data
            //         let obj = {
            //             id:this.detailInfo.id,
            //             deviceId:deviceId,
            //             channelId:'0',
            //             beginTime:'2021-09-20 18:56:00',
            //             endTime:'2021-09-20 18:59:40'
            //         }
            //         DAHUA_API.queryHls(obj).then(res=>{
            //             if(res.data.code === 0&&res.data.data.url){
            //                 debugger
            //                 this.getVideoStream(res.data.data.url)
            //             }else{
            //                 this.$message.warning(res.data.data.errMsg)
            //             }
            //         })
            //     }
            // })
        },
        equipmentChange(item) {
            this.alarmRecords = []
            this.isLoadData = false
            this.hasNext = true
            this.current = 1
            this.type = item.value
            this.getAlarmRecords(true)
        },
        queryTotal() {
            TOTAL_API.getBusinessTotal({
                orgId: this.$store.state.data.globalOrg.id || ''
            }).then(res => {
                if (res.data.code === 0) {
                    this.totalObj = res.data.data
                }
            })
        },
        formatAlarmType(type) {
            let obj = this.cameraAlarmType.find(item => {
                return type == item.value
            })
            return obj ? obj.label : ''
        },
        listenScroll() {
            const scrollDom = this.$refs.scollRef.wrap
            scrollDom.addEventListener('scroll', () => {
                if (scrollDom.scrollTop + 1000 >= scrollDom.scrollHeight && !this.isLoadData && this.hasNext) {
                    console.log('下一页')
                    this.current += 1
                    this.getAlarmRecords(true)
                }
            })
        },
        showDetailInfo(data) {
            this.showInfo = false
            this.detailInfo = JSON.parse(JSON.stringify(data))
            //查看摄像头
            if (data.type == 2) {
                CAM_API.get(data.equipmentId).then(res => {
                    if (res.data.code === 0) {
                        Object.assign(this.detailInfo, res.data.data)
                        this.showInfo = true
                    }
                })
            }
            //查看RFID
            else if (data.type == 0) {
                RFID_API.getRfidEquipmentById(data.rfidEquipmentId).then(res => {
                    if (res.data.code === 0) {
                        Object.assign(this.detailInfo, res.data.data)
                        this.showInfo = true
                    }
                })
            } else if (data.type == 1) {
                ALARM_API.get(data.equipmentId).then(res => {
                    if (res.data.code === 0) {
                        Object.assign(this.detailInfo, res.data.data)
                        this.showInfo = true
                    }
                })
            }
        },
        getTitle(type) {
            return type == 1 ? '充电设备预警' : type == 0 ? '电动车预警' : '摄像头预警'
        },
        //定位
        doPositioning(data) {
            let { longitude, latitude } = data
            this.$refs['ali-map'].doPositioning(longitude, latitude)
        },
        //接警
        doDeal(item) {
            API.dealAlarm({ id: item.id, isDeal: 'Y' }).then(res => {
                if (res.data.code === 0) {
                    this.$message.success('系统已接警！')
                    this.getAlarmRecords(true)
                    this.$refs['ali-map'].doClearMarker('mark-key-' + item.id)
                }
            })
        },
        doRouter(path) {
            this.$router.push({ path: path })
        },
        doQuery(item, index) {
            if (this.activeIndex == index) {
                this.activeIndex = -1
                let key = 'equipment-' + item.value
                this.$refs['ali-map'].doClearTagTypeMarker(key)
                return
            }
            this.activeIndex = index
            if (item.value == 0) {
                RFID_API.all({ orgId: this.$store.state.data.globalOrg.id }).then(res => {
                    if (res.data.code === 0) {
                        let lngLats = []
                        res.data.data.forEach(item => {
                            lngLats.push([item.longitude, item.latitude])
                        })
                        this.$refs['ali-map'].doAddMarkerByTypes(lngLats, item.value)
                    }
                })
            } else if (item.value == 1) {
                ALARM_API.all({ orgId: this.$store.state.data.globalOrg.id }).then(res => {
                    if (res.data.code === 0) {
                        let lngLats = []
                        res.data.data.forEach(item => {
                            lngLats.push([item.longitude, item.latitude])
                        })
                        this.$refs['ali-map'].doAddMarkerByTypes(lngLats, item.value)
                    }
                })
            } else {
                CAM_API.all({ orgId: this.$store.state.data.globalOrg.id }).then(res => {
                    if (res.data.code === 0) {
                        let lngLats = []
                        res.data.data.forEach(item => {
                            lngLats.push([item.longitude, item.latitude])
                        })
                        this.$refs['ali-map'].doAddMarkerByTypes(lngLats, item.value)
                    }
                })
            }
        },
        getAlarmRecords(flag) {
            this.lngLats = []
            this.isLoadData = true
            API.list({
                orgId: this.$store.state.data.globalOrg.id || -1,
                type: this.type,
                current: this.current,
                total: this.total
            }).then(res => {
                this.isLoadData = false
                if (res.data.code === 0) {
                    this.total = res.data.data.total
                    this.alarmRecords = this.alarmRecords.concat(res.data.data.records)
                    if (this.alarmRecords.length >= this.total) {
                        this.hasNext = false
                    }
                    if (flag) {
                        res.data.data.records.forEach(item => {
                            //没有接警的都提示在地图上
                            if (item.isDeal != 'Y' && item.longitude && item.latitude) {
                                //存在经纬度完全一致的数据，打标记标记一次
                                if (this.lngLats.length == 0) {
                                    this.lngLats.push({
                                        id: 'mark-key-' + item.id, //预警记录ID
                                        lnglat: [item.longitude, item.latitude],
                                        equipmentName: item.equipmentName
                                    })
                                } else {
                                    let index = this.lngLats.findIndex(d => {
                                        if (d.lnglat[0] == item.longitude && d.lnglat[1] == item.latitude) {
                                            return true
                                        }
                                        return false
                                    })
                                    if (index == -1) {
                                        this.lngLats.push({
                                            id: 'mark-key-' + item.id, //预警记录ID
                                            lnglat: [item.longitude, item.latitude],
                                            equipmentName: item.equipmentName
                                        })
                                    }
                                }
                            }
                        })
                        if (this.lngLats.length > 0) {
                            console.log(this.lngLats)
                            this.$refs['ali-map'].doSetAllAlarmPosition(this.lngLats)
                        }
                    }
                }
            })
        }
    }
}
</script>


<style>
.alarm-wrap-class {
    height: calc(100vh - 160px);
}
._progress ._time-amount,
._progress ._time-current {
    width: 60px;
}
video {
    width: 100%;
}
</style>

<style scoped lang="scss">
/deep/.el-select {
    width: 100%;
    div {
        width: inherit;
    }
}
/deep/.el-input__inner {
    // background-color: #034c6a;
    background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));
    color: #fff;
    border: none;
}
.wisdom-main {
    height: calc(100vh - 70px);
    // height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #081832;
    transition: all ease-in-out;
    position: relative;
    /deep/.el-dialog__body {
        background: #081832;
    }
    .bottom {
        border-left: 1px solid #e0e0e0;
        flex: 2;
        border-top: 1px solid #e0e0e0;
    }
    .top {
        margin-left: 1px;
        position: relative;
        height: 70px;
        .header_center {
            width: 30%;
            background-image: url(/img/logoBg.png);
            background-size: 100% 100%;
            color: #a4c2ce;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            float: left;
        }
        .go-back {
            color: #adcedc;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            width: 100px;
            display: inline-block;
            text-align: center;
        }
        .go-back:hover {
            border-bottom: 4px solid #4b8df8;
            box-shadow: -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset, 10px 0px 15px #034c6a inset, 0px 10px 15px #034c6a inset;
            box-sizing: border-box;
        }
    }
    .header_full {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #034c6a;
        font-size: 20px;
        cursor: pointer;
        width: 33%;
        text-align: right;
    }
    .header_full:hover {
        color: #fff;
    }
    .title {
        // background-color: #034c6a;
        background: linear-gradient(180deg, rgba(32, 70, 102, 0.9), rgba(23, 34, 50, 0.9));
        border-color: rgba(32, 70, 102, 0.4);
        border-radius: 5px;
        position: absolute;
        height: 35px;
        width: 60%;
        top: -15px;
        color: #ffffff;
        font-weight: bold;
        font-size: 16px;
        left: 20%;
        line-height: 35px;
        text-align: center;
        z-index: 1;
    }
    .warning {
        animation: glow 800ms ease-out infinite alternate;
    }
    .container {
        flex: 1;
        position: relative;
        .info {
            width: 500px;
            height: 220px;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -110px;
            position: absolute;
            color: #fff;
            z-index: 11;
            background: linear-gradient(180deg, rgba(32, 70, 102, 0.7), rgba(23, 34, 50, 0.7));
            transition: all ease-in-out 0.2s;
            transform: scale(0);
            border: 1px solid #034c6a;
            border-radius: 5px;
            padding: 15px;
            &-card {
                box-shadow: -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset, 10px 0px 15px #034c6a inset, 0px 10px 15px #034c6a inset;
                border: 1px solid #034c6a;
                box-sizing: border-box;
                position: relative;
                margin-top: 25px;
                height: 48%;
            }
        }
        .info.active {
            transform: scale(1);
        }
        .center {
            width: 98%;
            margin-right: 1%;
            margin-left: 1%;
            float: left;
            height: 95%;
            box-shadow: -10px 0px 15px #034c6a inset;
            border: 1px solid #034c6a;
            box-sizing: border-box;
            position: relative;
            margin-top: 25px;
            padding: 7px;

            .right {
                width: 20%;
                position: absolute;
                right: 1%;
                top: 5%;
                font-size: 14px;
                &-card {
                    height: calc(100vh - 160px);
                    border: 1px solid #034c6a;
                    box-sizing: border-box;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));

                    .alarm {
                        border-bottom: 1px solid rgba(46, 161, 214, 0.4);
                        cursor: pointer;
                        padding: 10px;
                        position: relative;
                    }
                    .alarm:hover {
                        background: hsla(0, 0%, 100%, 0.1);
                    }
                    .deal-icon {
                        color: red;
                        font-size: 30px;
                        position: absolute;
                        right: 10px;
                        top: 30%;
                    }
                    .normal-icon {
                        color: #409eff;
                        font-size: 30px;
                        position: absolute;
                        right: 10px;
                        top: 30%;
                    }
                }
                .user-info {
                    color: #fff;
                    list-style: none;
                }
            }
            .butns {
                position: absolute;
                border: 1px solid rgba(12, 23, 35, 0.7);
                background: rgba(12, 23, 35, 0.7);
                margin-top: 2px;
                margin-left: -150px;
                padding: 3px 20px;
                bottom: 20px;
                width: 300px;
                left: 50%;
                display: flex;
                height: 50px;
                align-items: center;
                justify-content: space-around;
                .card {
                    text-align: center;
                    color: #409eff;
                    cursor: pointer;
                    flex: 1;
                    height: 100%;
                    padding: 3px;
                }
                .card.active {
                    background-color: rgba(64, 158, 255, 0.8);
                    color: #fff;
                }
                .card:hover {
                    background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));
                }
            }
            .statistics {
                position: absolute;
                margin-top: 2px;
                margin-left: -150px;
                top: 30px;
                left: 160px;
                display: flex;
                height: 50px;
                align-items: center;
                justify-content: space-around;
                .item {
                    display: flex;
                    align-items: center;
                    border: 1px solid rgba(32, 70, 102, 0.4);
                    background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));
                    color: #409eff;
                    padding: 3px 10px;
                    margin-right: 20px;
                    border-radius: 3px;
                }
            }
            .three{
                position: absolute;
                left: 20px;
                bottom: 30px;
                background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
            }
            .three:hover{
                background-color: #409eff;
                color: #fff;
            }
        }
    }
}
@keyframes glow {
    0% {
        border-color: #ec8585;
        box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1), 0 1px 0 #ec8585;
    }
    100% {
        border-color: #ff0000;
        box-shadow: 0 0 40px rgba(249, 0, 0, 0.6), inset 0 5px 20px rgba(249, 2, 2, 0.4), 0 1px 0 #ff0000;
    }
}
.full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1111;
    transform: scale(1);
}
</style>
